<title>工具提示</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">工具提示</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">工具提示</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Tooltip Positions -->
<section id="tooltip-positions">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Positions</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Four options are available: top, right, bottom, and left aligned.</p>
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Top Tooltip</h5>
								<p>Add <code>data-toggle="tooltip"</code> &amp; <code>data-placement="top"</code> to add top tooltip.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
									Tooltip on top
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Right Tooltip</h5>
								<p>Add <code>data-toggle="tooltip"</code> &amp; <code>data-placement="right"</code> to add right tooltip.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
									Tooltip on right
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Bottom Tooltip</h5>
								<p>Add <code>data-toggle="tooltip"</code> &amp; <code>data-placement="bottom"</code> to add bottom tooltip.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
									Tooltip on bottom
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Basic Left Tooltip</h5>
								<p>Add <code>data-toggle="tooltip"</code> &amp; <code>data-placement="left"</code> to add left tooltip.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
									Tooltip on left
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->

<!-- Tooltip Options -->
<section id="tooltip-options">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Options</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Disabled Animaition</h5>
								<p>Use <code>data-animation="false"</code> to remove fade animation. Default is true.</p>
								<button type="button" class="btn btn-warning" data-toggle="tooltip" data-original-title="Without Fade Animation" data-animation="false">
									No animation
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Delay Show/Hide</h5>
								<p>Delay showing and hiding the tooltip (<code>ms</code>) - does not apply to manual trigger type.</p>
								<button type="button" class="btn btn-warning delay" data-toggle="tooltip" data-original-title="Click Triggered" data-delay="500">
									Delay Tooltip
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Supports HTML</h5>
								<p>Use <code>data-html="true"</code> for HTML supported trigger.</p>
								<button type="button" class="btn btn-warning" data-toggle="tooltip" data-original-title="<b>This</b> is <i>HTML</i> <u>tooltip</u>" data-html="true">
									HTML Tooltip
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Tooltip Template</h5>
								<p>Base HTML to use when creating the tooltip. The tooltip's title will be injected into the <code>.tooltip-inner</code>. <code>.tooltip-arrow</code> will become the tooltip's arrow.The outermost wrapper element should have the <code>.tooltip</code> class.</p>
								<button type="button" class="btn btn-warning template" data-toggle="tooltip" data-original-title="Check console for default template structure" data-trigger="click">
									Tooltip Template
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->

<!-- Tooltip Methods -->
<section id="tooltip-methods">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Methods</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Show</h5>
								<p>Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown.(i.e. before the <code>shown.bs.tooltip</code> event occurs)</p>
								<button type="button" class="btn btn-primary" id="show-method" data-popup="tooltip" data-original-title="Show Method Tooltip" data-trigger="manual">
									Show Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hide</h5>
								<p>Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the <code>hidden.bs.tooltip</code> event occurs).</p>
								<button type="button" class="btn btn-primary" id="hide-method" data-popup="tooltip" data-original-title="Hide Method Tooltip" data-trigger="manual">
									Hide Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Toggle</h5>
								<p>Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs).</p>
								<button type="button" class="btn btn-primary" id="toggle-method" data-popup="tooltip" data-original-title="Toggle Method Tooltip" data-trigger="manual">
									Toggle Method <i class="ft-play ml-1"></i>
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Dispose</h5>
								<p>Hides and destroys an element’s tooltip. Tooltips that use delegation cannot be individually destroyed on descendant trigger elements.</p>
								<div class="btn-group">
									<button type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Dispose Method Tooltip" data-trigger="click" id="dispose-method">
										Dispose
									</button>
									<button type="button" class="btn btn-primary" id="dispose">
										<i class="la la-play-circle"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->

<!-- Tooltip Events -->
<section id="tooltip-events">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Events</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Show Event</h5>
								<p>This event fires immediately when the <code>show</code> instance method is called.</p>
								<button type="button" class="btn btn-info" id="show-tooltip">
									Show Event Tooltip
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Shown Event</h5>
								<p>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</p>
								<button type="button" class="btn btn-info" id="shown-tooltip">
									Shown Event Tooltip
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hide Event</h5>
								<p>This event is fired immediately when the <code>hide</code> instance method has been called.</p>
								<button type="button" class="btn btn-info" id="hide-tooltip">
									Hide Event Tooltip
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hidden Event</h5>
								<p>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</p>
								<button type="button" class="btn btn-info" id="hidden-tooltip">
									Hidden Event Tooltip
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->

<!-- Tooltip Triggers -->
<section id="tooltip-triggers">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Triggers</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Tooltip is triggered using - click | hover | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.</p>
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Click</h5>
								<p>Use <code>data-trigger="click"</code> for click trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Click Triggered" data-trigger="click">
									On Click Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Focus</h5>
								<p>Use <code>data-trigger="focus"</code> for focus trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Focus Triggered" data-trigger="focus">
									On Focus Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Hover</h5>
								<p>Use <code>data-trigger="hover"</code> for hover trigger. This is a default trigger.</p>
								<button type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Hover Triggered">
									On Hover Trigger
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Manual</h5>
								<p>Use <code>data-trigger="manual"</code> for manual trigger. You can do show/hide using js</p>
								<button type="button" class="btn btn-primary manual" data-toggle="tooltip" data-original-title="Manual Triggered" data-trigger="manual" >
									On Manual Trigger
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->

<!-- Tooltip Colot Options -->
<section id="tooltip-color-options">
	<div class="row ">
		<div class="col-12">		
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tooltip Color Options</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
			  		<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-collapse">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Custom Tooltip Backround Color</h5>
								<p>Use <code>data-popup="tooltip-custom"</code> for Custom tooltip. You can change tooltip color using <code>data-bg-color</code> attribute.</p>
								<button type="button" class="btn btn-warning" data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Custom Background Color" data-bg-color="pink">
									Custom Bg
								</button>
							</div>
							<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1">
								<h5>Custom Tooltip Text Color</h5>
								<p>Use <code>data-popup="tooltip-custom"</code> for Custom tooltip. You can change tooltip text color using <code>data-text-color</code> attribute.</p>
								<button type="button" class="btn btn-warning" data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Custom Background Color" data-text-color="info">
									Custom Text
								</button>
							</div>
							<div class="col-xl-3 col-lg-12 mb-1">
								<h5>Custom Tooltip Background &amp; Text Color</h5>
								<p>Use <code>data-popup="tooltip-custom"</code> for Custom bordered colored tooltip. You can change tooltip background and text color using <code>data-bg-color</code> and <code>data-text-color</code> attributes.</p>
								<button type="button" class="btn btn-warning" data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Custom Bg &amp; Text Color</span>" data-html="true" data-text-color="black" data-bg-color="red" data-placement="top">
									Custom bg &amp; Text
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section Ends -->
</div>

<script type="text/javascript">
	lucky.require('tooltips',lucky.factory('tooltips'));
</script>